<template>
  <slide-view
    v-loading="loading"
    class="d-view"
    :listenerIDs="['workbench-main-container']"
    :noListenerClass="noListenerClass"
    @side-close="hideView"
    :body-style="{ padding: '10px 30px', height: '100%' }"
  >
    <flexbox orient="vertical" style="height: 100%">
      <flexbox class="info-header">
        <div class="header-name">审批历史</div>
        <img @click="hideView" class="header-close" src="@/assets/img/task_close.png" />
      </flexbox>
      <div class="info-body">
        <!-- 基本信息 -->
        <flexbox :gutter="0" align="stretch" wrap="wrap">
          <flexbox-item :span="0.5" class="b-cell">
            <flexbox align="stretch" class="b-cell-b">
              <div class="b-cell-name">内容</div>
              <div class="b-cell-value">{{ info.content }}</div>
            </flexbox>
          </flexbox-item>
          <flexbox-item :span="0.5" class="b-cell">
            <flexbox align="stretch" class="b-cell-b">
              <div class="b-cell-name">创建人</div>
              <div class="b-cell-value">{{ info.admin_realname }}</div>
            </flexbox>
          </flexbox-item>
        </flexbox>
        <!-- 关联业务 -->
        <create-sections v-if="info.contract_id" title="关联业务" class="create-sections">
          <div class="related-business create-sections-content">
            <flexbox class="cell">
              <i class="cell-head wukong wukong-contract" />
              <div class="cell-body cursor-pointer" @click="handleViewOrder">订单</div>
            </flexbox>
          </div>
        </create-sections>
        <!-- 审核信息 -->
        <create-sections title="审核信息" class="create-sections">
          <examine-info
            :id="
              info.type == '订单创建'
                ? info.contract_id
                : info.type == '回款'
                ? info.receivables_id
                : info.examine_id
            "
            class="create-sections-content"
            :examineType="
              info.type == '订单创建'
                ? 'crm_contract'
                : info.type == '回款'
                ? 'crm_receivables'
                : 'oa_examine'
            "
            :flow_id="info.flow_id"
            @on-handle="examineHandle"
          />
        </create-sections>
      </div>
    </flexbox>
    <c-r-m-full-screen-info
      :visible.sync="showRelatedDetail"
      crmType="contract"
      :id="info.contract_id"
    />
  </slide-view>
</template>

<script>
import { oaNoticeInfo } from "@/api/oamanagement/workbench";
import SlideView from "@/components/SlideView";
import CreateSections from "@/components/CreateSections";
import ExamineInfo from "@/components/Examine/ExamineInfo";
import CRMFullScreenInfo from "@/views/customermanagement/components/CRMFullScreenDetail";
export default {
  /** 审批详情 */
  name: "inform-detail",
  components: {
    SlideView,
    CreateSections,
    ExamineInfo,
    CRMFullScreenInfo,
  },
  props: {
    // 详情信息id
    id: [String, Number],
    noListenerClass: {
      type: Array,
      default: () => {
        return ["list-box"];
      },
    },
  },
  watch: {
    id(val) {
      this.getDetial();
    },
  },
  data() {
    return {
      loading: false,
      info: {},
      // 相关详情的查看
      showRelatedDetail: false,
    };
  },
  mounted() {
    this.getDetial();
  },
  methods: {
    getDetial() {
      this.loading = true;
      oaNoticeInfo({ id: this.id })
        .then((res) => {
          this.info = res.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //** 点击关闭按钮隐藏视图 */
    hideView() {
      this.info = {};
      this.showRelatedDetail = true;
      // 重新查询审批历史未读数量
      this.$store.dispatch("GetInformNum");
      this.$emit("hide-view");
    },
    // 查看关联业务详情
    handleViewOrder() {
      this.showRelatedDetail = true;
    },
    // 审批操作
    examineHandle(data) {
      this.$store.dispatch("GetOAMessageNum", "examine");
      this.$emit("on-examine-handle", data);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../styles/content.scss";

.info-header {
  position: relative;
  min-height: 60px;
  .header-name {
    font-size: 14px;
    color: #333333;
    flex: 1;
  }
  .header-close {
    display: block;
    width: 40px;
    height: 40px;
    margin-left: 20px;
    padding: 10px;
    cursor: pointer;
  }
}

.create-sections {
  padding: 5px 0;
  /deep/ .section-header {
    padding: 5px 0;
  }
}

.create-sections-content {
  padding: 0;
}

.related-business {
  margin: 15px 0;
  .cell {
    padding: 8px;
    background-color: #f5f7fa;
    border-radius: 2px;
    position: relative;
    margin-bottom: 5px;

    .cell-head {
      display: block;
      width: 15px;
      height: 15px;
      margin-right: 8px;
      color: #6394e5;
      font-size: 14px;
    }

    .cell-body {
      flex: 1;
      color: #3e84e9;
      font-size: 12px;
    }

    .cursor-pointer {
      cursor: pointer;
    }
  }
}

.b-cell {
  .b-cell-b {
    width: auto;
    padding: 8px;
    line-height: 22px;
    .b-cell-name {
      width: 100px;
      margin-right: 10px;
      font-size: 13px;
      flex-shrink: 0;
      color: #777;
    }
    .b-cell-value {
      font-size: 13px;
      color: #333;
    }
    .b-cell-foot {
      flex-shrink: 0;
      display: block;
      width: 15px;
      height: 15px;
      margin-left: 8px;
    }
  }
}

.info-body {
  flex: 1;
  overflow-y: auto;
  width: 100%;
}

.d-view {
  position: fixed;
  width: 926px;
  top: 60px;
  bottom: 0px;
  right: 0px;
}
</style>
